<template>
  <div class="box">
    <div class="top">
      <h3>待办事项</h3>
      <div id="tbox"></div>
      <div class="deal">
        <p class="p1">{{ arr1[1] }} <span>%</span></p>
        <p class="p2">已处理</p>
      </div>
    </div>
    <div class="bottom">
      <div class="absolutely">
        <div class="left">
          <p class="num">
            <span>{{ arr2[1] }}</span
            >%
          </p>
          <p>处理中</p>
        </div>
        <div class="right">
          <p class="num">
            <span>{{ arr3[1] }}</span
            >%
          </p>
          <p>未处理</p>
        </div>
      </div>
      <div class="amount">
        <div class="amount-1">
          <p><img src="../img/shouye45.png" /></p>
          <p class="p1">{{ arr1[0] }}</p>
          <p class="p2">已处理</p>
        </div>
        <div class="amount-1">
          <p><img src="../img/shouye47.png" /></p>
          <p class="p1">{{ arr2[0] }}</p>
          <p class="p2">处理中</p>
        </div>
        <div class="amount-1">
          <p><img src="../img/shouye49.png" /></p>
          <p class="p1">{{ arr3[0] }}</p>
          <p class="p2">未处理</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    toDArr: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.isEcharts(this.arr1, this.arr2, this.arr3);
  },
  computed: {
    arr1() {
      if (this.toDArr.length > 0) {
        return this.toDArr[0];
      }
      return [1, 2];
    },
    arr2() {
      if (this.toDArr.length > 0) {
        return this.toDArr[1];
      }
      return [1, 2];
    },
    arr3() {
      if (this.toDArr.length > 0) {
        return this.toDArr[2];
      }
      return [1, 2];
    },
  },
  watch: {
    toDArr: {
      deep: true,
      handler() {
        this.isEcharts(this.arr1, this.arr2, this.arr3);
      },
    },
  },
  methods: {
    isEcharts(date1, date2, date3) {
      var myChart3 = echarts.init(document.getElementById("tbox"));
      myChart3.setOption({
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "事项",
            type: "pie",
            radius: ["60%", "70%"],
            // avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: date1[0],
                name: "已处理",
                itemStyle: {
                  color: "#4ad6c6",
                },
              },
              {
                value: date2[0],
                name: "处理中",
                itemStyle: {
                  color: "#f4d371",
                },
              },
              {
                value: date3[0],
                name: "未处理",
                itemStyle: {
                  color: "#f1656d",
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
div,
p {
  box-sizing: border-box;
}
.box {
  width: 264px;
  height: 442px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(156, 158, 158, 0.5);
}
.top {
  width: 100%;
  height: 206px;
  padding: 16px 24px 0;
  border-bottom: #e9f1f7 1px solid;
  position: relative;
  h3 {
    font-size: 16px;
    color: #425377;
    font-weight: 800;
  }
  #tbox {
    width: 100%;
    height: 170px;
  }
  .deal {
    width: 65px;
    height: 65px;
    position: absolute;
    left: 102px;
    top: 96px;
    text-align: center;
    .p1 {
      color: #425276;
      font-size: 32px;
      span {
        font-size: 12px;
        color: #7388a0;
        margin-left: -7px;
      }
    }
    .p2 {
      font-size: 12px;
      color: #7388a0;
    }
  }
}
.bottom {
  width: 100%;
  height: 236px;
  padding: 17px 24px;
  text-align: center;

  .absolutely {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #7d8fa8;
    .num {
      font-size: 12px;
      color: #6e6e6e;
      span {
        font-size: 24px;
        color: #425276;
        font-weight: 800;
        margin-right: 3px;
      }
    }
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
  }
  .amount {
    display: flex;
    justify-content: space-between;
    padding-top: 34px;

    .amount-1 {
      flex: 1;
      .p1 {
        padding-top: 9px;
        font-size: 16px;
        color: #425276;
        font-weight: 800;
      }
      .p2 {
        padding-top: 9px;
        font-size: 12px;
        color: #7286a2;
      }
    }
  }
}
</style>